<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Component One Merge</title>
    <link href="../contents/bootstrap.min.css" rel="stylesheet"/>
    <link href="../contents/wijmo.min.2022.04.22.uat.css" rel="stylesheet"/>
    
    <script type="text/javascript" src="../Javascripts/wijmo.min.2022.04.22.uat.js"></script>
    
    <link rel="stylesheet" href="../contents/chartApp.css">

</head>

<body>
    <div class="container-fluid">
        <div id="grid"></div>
    </div>

    <script type="text/javascript" charset="utf-8">
        document.readyState == "complete" ? init() : window.onload = init;

        function getData() {
            let countries = 'US,Germany,UK,Japan'.split(',');
            let data = [];
            for (let i = 0; i < 20; i++) {
                data.push({
                    id: i,
                    country: countries[i % countries.length],
                    active: i % 5 != 0,
                    downloads: Math.round(Math.round() * 200000),
                    sales: Math.random() * 10000,
                    expenses: Math.round() * 50000
                });
            }
            return data;
        }

        function init() {
            let grid = new wijmo.grid.FlexGrid("#grid");
            grid.initialize({
                allowMerging: 'ColumnHeaders',
                //alternatingRowStep: 0,
                autoGenerateColumns: false,
                headersVisibility:1,
                isReadOnly :true,
                autoSizeMode:wijmo.grid.AutoSizeMode.Both,
                selection:{
                    row:-1,
                    col:-1,
                    row2:-1,
                    col2:-1
                },
                selectionMode:wijmo.grid.SelectionMode.Cell,
                columns: [
                    { binding: 'country', header: 'Country', allowMerging: true },
                    { binding: 'sales', header: 'Sales', format: 'n2' },
                    { binding: 'expenses', header: 'Expenses', format: 'n2' },
                    { binding: 'active', header: 'Active', allowMerging: true }
                ],
                itemsSource: new wijmo.collections.CollectionView(getData())
            });

            let extraRow = new wijmo.grid.Row();
            extraRow.allowMerging = true;
            let panel = grid.columnHeaders;
            panel.rows.splice(0, 0, extraRow);

            for (let colIndex = 1; colIndex <= 2; colIndex++) {
                panel.setCellData(0, colIndex, "Amounts");
            }

            ["country", 'active'].forEach(function (item) {
                let col = grid.getColumn(item);
                if (col) {
                    col.allowMerging = true;
                    panel.setCellData(0, col.index, col.header);
                }
            });

            grid.formatItem.addHandler(function (s, e) {
                if (e.panel === s.columnHeaders && e.range.rowSpan > 1) {
                    let html = e.cell.innerHTML;
                    e.cell.innerHTML = `<div class='v-center'>${html}</div>`;
                }
            });
        }
    </script>
</body>

</html>